<template>
  <div>
    <keep-alive>
      <component :is="activeComp" />
    </keep-alive>
    <div>
      <button @click="activeComp = 'StepOne'" v-if="activeComp === 'StepTwo'">
        Go to Step Two
      </button>
      <button @click="activeComp = 'StepTwo'" v-else>Back to Step One</button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MyStepOne from './components/MyStepOne.vue';
import MyStepTwo from './components/MyStepTwo.vue';

export default defineComponent({
  components: { MyStepTwo, MyStepOne },
  data() {
    return {
      activeComp: "StepOne"
    }
  }
})
</script>
